<template>
    <div class="ele-body">
        <el-card shadow="never">
            <!-- <Search @search="reload" /> -->
            <ele-pro-table ref="table" :columns="columns" :datasource="datasource" :selection.sync="selection"
                :headerEllipsis="false" cache-key="_id">
                <!-- 表头工具栏 -->
                <template v-slot:toolbar>
                    <!-- <el-button size="small" type="primary" icon="el-icon-plus" class="ele-btn-icon" @click="openEdit()">
                        新建
                    </el-button> -->
                    <!-- <el-button size="small" type="danger" icon="el-icon-delete" class="ele-btn-icon"
                        :disabled="!selection.length" @click="removeBatch">
                        批量删除
                    </el-button> -->
                </template>
                <template v-slot:userNum1="{ row }">
                    <div>{{ row.userNum1 }}</div>
                    <div>{{ row.userNum2 }}</div>
                    <div>{{ row.userNum6 }}</div>
                    <div>{{ row.userNum30 }}</div>
                </template>
                <template v-slot:activeWeek="{ row }">
                    <div>{{ row.activeWeek }}</div>
                    <div>{{ row.activeMonthly }}</div>
                </template>
                <template v-slot:userARPU="{ row }">
                    <div>{{ row.userARPU }}</div>
                    <div>{{ row.userARPPU }}</div>
                </template>
                <template v-slot:RARPU="{ row }">
                    <div>{{ row.RARPU }}</div>
                    <div>{{ row.RARPPU }}</div>
                </template>
                <!-- 操作列 -->
                <!-- <template v-slot:action="{ row }">
                    <el-link type="primary" :underline="false" @click="openEdit(row)">
                        修改
                    </el-link>
                    <el-popconfirm class="ele-action" title="确定要删除此应用吗？" @confirm="remove(row)">
                        <template v-slot:reference>
                            <el-link type="danger" :underline="false">
                                删除
                            </el-link>
                        </template>
                    </el-popconfirm>
                </template> -->
            </ele-pro-table>
        </el-card>
    </div>
</template>

<script>
import { pageData, removeUser } from '@/api/operationData/recharge';
import Search from './components/search.vue';
import { formatDate } from "@/utils/formate";
export default {
    components: { Search },
    data() {
        return {
            // 当前编辑数据
            current: null,
            // 是否显示编辑弹窗
            showEdit: false,
            // 表格选中数据
            selection: [],
        };
    },
    computed: {
        // 表格列配置
        columns() {
            return [
                {
                    columnKey: 'index',
                    type: 'index',
                    label: '序号',
                    width: 50,
                    align: 'center',
                    fixed: 'left',
                },
                {
                    prop: 'createTime',
                    label: '日期',
                    minWidth: 100,
                    align: 'center'
                },
                {
                    prop: 'addUser',
                    label: '新增用户',
                    minWidth: 90,
                    align: 'center'
                },
                {
                    prop: 'touristsNum',
                    label: '游客玩家',
                    minWidth: 90,
                    align: 'center'
                },
                {
                    prop: 'activeNum',
                    label: '活跃用户',
                    minWidth: 90,
                    align: 'center'
                },
                {
                    prop: 'payNum',
                    label: '游戏付费活跃',
                    minWidth: 110,
                    align: 'center'
                },
                {
                    prop: 'averageOnline',
                    label: '平均在线',
                    minWidth: 90,
                    align: 'center'
                },
                {
                    prop: 'maxOnline',
                    label: '最高在线',
                    minWidth: 110,
                    align: 'center'
                },
                {
                    prop: 'userOnline',
                    label: '人均在线时长',
                    minWidth: 110,
                    align: 'center'
                },
                {
                    prop: 'userLoginNum',
                    label: '人均登录次数',
                    minWidth: 110,
                    align: 'center'
                },
                {
                    prop: 'userNum1',
                    slot: 'userNum1',
                    label: '(次日|三日|七日|30日)留存',
                    minWidth: 150,
                    align: 'center'
                },
                // {
                //     prop: 'userNum2',
                //     label: '三日留存',
                //     minWidth: 110,
                //     align: 'center'
                // },
                // {
                //     prop: 'userNum6',
                //     label: '七日留存',
                //     minWidth: 110,
                //     align: 'center'
                // },
                // {
                //     prop: 'userNum30',
                //     label: '30日留存',
                //     minWidth: 110,
                //     align: 'center'
                // },
                {
                    prop: 'activeWeek',
                    slot: 'activeWeek',
                    label: '周|月活跃',
                    minWidth: 110,
                    align: 'center'
                },
                // {
                //     prop: 'activeMonthly',
                //     label: '月活跃',
                //     minWidth: 110,
                //     align: 'center'
                // }
            ]
        }
    },
    methods: {
        /* 表格数据源 */
         datasource({ page, limit, where, order }) {
            return pageData({ ...where, type: 3, ...order, page, limit })
        },
        /* 刷新表格 */
        reload(where) {
            this.$refs.table.reload({ page: 1, where: where });
        },
        /* 打开编辑弹窗 */
        openEdit(row) {
            this.current = row;
            this.showEdit = true;
        },
        /* 删除 */
        remove(row) {
            const loading = this.$loading({ lock: true });
            removeUser({ ids: [row._id] })
                .then((msg) => {
                    loading.close();
                    this.$message.success(msg);
                    this.reload();
                })
                .catch((e) => {
                    loading.close();
                    this.$message.error(e.message);
                });
        },
        /* 批量删除 */
        removeBatch() {
            this.$confirm('确定要删除选中的视频吗?', '提示', {
                type: 'warning'
            })
                .then(() => {
                    const loading = this.$loading({ lock: true });
                    let ids = this.selection.map((d) => d._id)
                    removeUser({ ids })
                        .then((msg) => {
                            this.$message.success(msg);
                            this.reload();
                            loading.close();
                        })
                        .catch((e) => {
                            this.$message.error(e.message);
                            loading.close();
                        });
                })
                .catch(() => { });
        },
        /**
         * 处理排序变化
         * @param {Object} column
         * @param {String} prop
         * @param {String} order
         */
        handleSortChange({ column, prop, order }) {
            const sort = {};
            if (order === 'ascending') {
                sort[prop] = 1;
            } else if (order === 'descending') {
                sort[prop] = -1;
            }
            this.reload({}, sort);
        }

    }
};
</script>